﻿<div class="doc-part-box" id="tabs">
  <h2>选项卡</h2>
  <p class="lead">切换选项卡,显示相应页面.很常用的组件</p>
  <p>单击或者鼠标移入选项卡,激活该选项页.选项卡与页由索引顺序相关联,例如:激活第2个选项卡时,则激活第2个面板.</p>
  <p>当前活动的选项卡和对应页面有类名<b>active</b>,class="tabs-label active" class="tabs-panel active" 默认第1个是激活的</p>
  <div id="mytabs1" class="tabs-box">
    <div class="tabs-header">
      <span class="tabs-label">苏轼</span>
      <span class="tabs-label">陆游</span>
      <span class="tabs-label">李清照</span>
    </div>
    <div class="tabs-panel">
      <h4>饮湖上初晴后雨二首·其二</h4>
      <p>水光潋滟晴方好</p><p>山色空蒙雨亦奇</p><p>欲把西湖比西子</p><p>淡妆浓抹总相宜</p>
    </div>
    <div class="tabs-panel">
      <h4>卜算子 咏梅</h4>
      <p>驿外断桥边</p><p>寂寞开无主</p><p>已是黄昏独自愁</p>
      <p>更著风和雨</p><p>无意苦争春</p>
      <p>一任群芳妒</p><p>零落成泥碾作尘</p><p>只有香如故</p>
    </div>
    <div class="tabs-panel">
      <h4>一剪梅 红藕香残玉蕈秋</h4><p>红藕香残玉蕈秋</p><p>轻解罗裳</p><p>独上兰舟</p>
      <p>云中谁寄锦书来</p><p>雁字回时</p><p>月满西楼</p><p>花自飘零水自流</p>
      <p>一种相思</p><p>两处闲愁</p><p>此情无计可消除</p><p>才下眉头</p><p>却上心头</p>
    </div>
  </div>
  <br />
  <div id="mytabs3" class="tabs-box">
    <div class="tabs-header">
      <span class="tabs-label">选项1-mover</span>
      <span class="tabs-label">选项2-mover</span>
      <span class="tabs-label">选项3-mover</span>
    </div>
    <div class="tabs-panel">选项1-内容</div>
    <div class="tabs-panel">选项2-内容</div>
    <div class="tabs-panel">选项3-内容</div>
  </div>
  <br />
  <p class="article-title sm">HTML结构,js调用</p>
  <pre class="code">
&lt;div id="mytabs1" class="tabs-box"&gt;
    &lt;div class="tabs-header"&gt;
        &lt;span class="tabs-label"&gt;苏轼&lt;/span&gt;
        &lt;span class="tabs-label"&gt;陆游&lt;/span&gt;
        &lt;span class="tabs-label"&gt;李清照&lt;/span&gt;
    &lt;/div &gt;
    &lt;div class="tabs-panel"&gt;...&lt;/div&gt;
    &lt;div class="tabs-panel"&gt;...&lt;/div &gt;
    &lt;div class="tabs-panel"&gt;...&lt;/div &gt;
&lt;/div&gt;
//
tabs('mytabs1');
// 切换方式鼠标移入时
tabs('mytabs1',0,2);
// 指定第2个面板激活,索引从0开始
tabs('mytabs1',1);
</pre>
  <br />
  <p class="article-title sm">选项卡均分</p>
  <p>选项卡平均整行,加上full类.<b>class="tabs-box full"</b></p>
  <div id="mytabs2" class="tabs-box full">
    <div class="tabs-header">
      <span class="tabs-label">卓文君</span>
      <span class="tabs-label">上官婉儿</span>
      <span class="tabs-label">秦观</span>
    </div>
    <div class="tabs-panel">
      <h4>白头吟</h4>
      <p>皑如山上雪 皎若云间月 闻君有两意 故来相决绝</p>
      <p>今日斗酒会 明旦沟水头 躞蹀御沟上 沟水东西流</p>
      <p>凄凄复凄凄 嫁娶不须啼 愿得一心人 白头不相离</p>
      <p>竹竿何袅袅 鱼尾何簁簁 男儿重意气 何用钱刀为</p>
    </div>
    <div class="tabs-panel">
      <h4>彩书怨</h4>
      <p>叶下洞庭初 思君万里余 露浓香被冷 月落锦屏虚</p>
      <p>欲奏江南曲 贪封蓟北书 书中无别意 惟怅久离居</p>
    </div>
    <div class="tabs-panel">
      <h4>鹊桥仙 纤云弄巧</h4>
      <p>纤云弄巧 飞星传恨 银汉迢迢暗度 金风玉露一相逢 便胜却人间无数</p>
      <p>柔情似水 佳期如梦 忍顾鹊桥归路 两情若是久长时 又岂在朝朝暮暮</p>
    </div>
  </div>
  <br />
  <p class="article-title sm">颜色</p>
  @foreach (var item in new string[] { "primary", "danger", "success" })
  {
    <div id="mytabs_@item" class="tabs-box @item">
      <div class="tabs-header">
        <span class="tabs-label">选项1</span>
        <span class="tabs-label">选项2</span>
        <span class="tabs-label">选项3</span>
      </div>
      <div class="tabs-panel">选项1-内容</div>
      <div class="tabs-panel">选项2-内容</div>
      <div class="tabs-panel">选项3-内容</div>
    </div>
    <br />
  }
  <p class="article-title primary">列表形式</p>
  <p>加上list类 class="tabs-box list"</p>
  <div id="mytabs_list" class="tabs-box list">
    <div class="tabs-header">
      <span class="tabs-label">选项1</span>
      <span class="tabs-label">选项2</span>
      <span class="tabs-label">选项3</span>
    </div>
    <div class="tabs-panel">选项1-内容</div>
    <div class="tabs-panel">选项2-内容</div>
    <div class="tabs-panel">选项3-内容</div>
  </div>
  <script>
    tabs('mytabs1');
    tabs('mytabs2', 1, 1);
    tabs('mytabs3', 0, 2);
    tabs('mytabs_primary', 0);
    tabs('mytabs_success', 1);
    tabs('mytabs_danger', 2);
    tabs('mytabs_list');
  </script>
</div>